import React, { useState, useEffect } from 'react'
import { InputNumber } from 'antd'
import './style.scss'

function QuotaLimitItem(props) {
  const { title, data, transportData } = props
  const [monthBeforeNum, setMonthBeforeNum] = useState(undefined)
  const [multiple, setMultiple] = useState(undefined)

  useEffect(() => {
    setMonthBeforeNum(data.monthBeforeNum)
    setMultiple(data.multiple)
    console.log(data)
  }, [data.monthBeforeNum])

  const monthChange = (value) => {
    setMonthBeforeNum(value)
    transportData({monthBeforeNum: value, multiple})
  }
  const multipleChange = (value) => {
    setMultiple(value)
    transportData({monthBeforeNum, multiple: value})
  }
  return (
    <div className='quota-limit-item'>
      <div className="limit-item-label"><label>{title}</label></div>
      <div className="limit-item-wrap">前 <InputNumber value={monthBeforeNum} onChange={monthChange} precision={0} min={1} max={12} placeholder='请输入整数' /> 个月滚动月均动销量 X <InputNumber value={multiple} onChange={multipleChange} precision={1} placeholder='请输入倍数' /> 倍 - 月末总库存（含在途）</div>
    </div>
  )
}

export default React.memo(QuotaLimitItem)
